<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>课程签到系统</title>
    <style>
        .layui-form-select dl {
            max-height: 150px;
        }
    </style>
</head>

<body class="layui-layout-body close-footer" style="overflow-y:scroll">
    <div class="layui-layout layui-layout-admin ">
        <div class="layui-header">
            <div class="layui-logo">课程签到系统</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="img/1.jpg" class="layui-nav-img" id="picture">
                        <!--用户名-->
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本信息</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="Login.html">退出</a></li>
            </ul>
        </div>

        <div class="layui-layout-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">课程签到</li>
                        <li>帮助</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form" lay-filter="courseChoose2" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">课程</label>
                                    <div class="layui-input-block">
                                        <select name="coursename" lay-filter="coursename" id="coursename">
                                    </select>
                                    </div>
                                </div>
                            </form>
                            <div id="sign">
                                <center>
                                    <button type="button" class="layui-btn layui-btn-lg">签到</button>
                                </center>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-collapse" lay-filter="test">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                                    <div class="layui-colla-content">
                                        <p>
                                            有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                                    <div class="layui-colla-content">
                                        <p>
                                            因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
                                    <div class="layui-colla-content">
                                        <p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类 AMD 组织形式，并非是有意与时代背道而驰。layui 认为以 jQuery 为核心的开发方式还没有到完全消亡的时候，而早期市面上基于 jQuery 的 UI 都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
                                            <br><br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">贤心是男是女？</h2>
                                    <div class="layui-colla-content">
                                        <p>man！ 所以这个问题不要再出现了。。。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none;" id="signtable" width="400px">
        <div padding="5px">
            <p align="center">
                <button type="button" class="layui-btn" id="open">开启摄像头</button>
                <button type="button" class="layui-btn" id="close">关闭摄像头</button>
                <button type="button" class="layui-btn" id="CatchCode">签到</button>
            </p>
            <center>
                <div align="center" style="float: left;">
                    <video id="video" width="300px" height="300px" autoplay></video>
                    <canvas hidden="hidden" id="canvas" width="260" height="400"></canvas>
                </div>
            </center>
        </div>

    </div>

    <script src="layui/layui.js"></script>
    <script src="layui/jquery-3.5.1.min.js"></script>
    <script>
        layui.use(['element', 'table', 'layer', 'form'], function() {
            var element = layui.element,
                table1 = layui.table,
                table2 = layui.table,
                table3 = layui.table,
                form1 = layui.form,
                form2 = layui.form,
                form3 = layui.form,
                form4 = layui.form;

            layer.msg('欢迎登录学生系统');

            ppuser = "";

            $.ajax({

                    url: 'http://localhost:8080/getUserId',
                    dataType: 'json',
                    type: 'post',
                    async: false,
                    success: function(data) {
                        ppuser = data.id;
                        $("#picture").after(data.username);
                    }
                })
                // console.log(ppuser);

            $.ajax({
                url: 'http://localhost:8080/coursefindname2',
                dataType: 'json',
                type: 'get',
                data: {
                    'ppuser': window.ppuser
                },
                success: function(data) {
                    $.each(data.data, function(index, item) {
                        $('select#coursename').append(new Option(item.courseName, item.courseName)); // 下拉菜单里添加元素
                    });
                    //$("#TypeID").val("选中的值");
                    layui.form.render('select'); //重新渲染 固定写法
                }
            })

            sign.onclick = function() {
                layer.open({
                    content: $("#signtable"),
                    title: '面部识别',
                    maxWith: '300',
                    type: 1
                });
            }

            var video; //视频流对象
            var context; //绘制对象
            var canvas; //画布对象
            $(function() {
                var flag = false;
                //开启摄像头
                $("#open").click(function() {
                    //判断摄像头是否打开
                    if (!flag) {
                        //调用摄像头初始化
                        open();
                        flag = true;
                    }
                });
                //关闭摄像头
                $("#close").click(function() {
                    //判断摄像头是否打开
                    if (flag) {
                        video.srcObject.getTracks()[0].stop();
                        flag = false;
                    }
                });
                //拍照
                $("#CatchCode").click(function() {
                    if (flag) {
                        context.drawImage(video, 0, 0, 330, 250);
                        CatchCode();
                    } else
                        alert("请先开启摄像头!");
                });
            });
            //将当前图像传输到后台
            function CatchCode() {
                //获取图像
                var img = getBase64();
                //Ajax将Base64字符串传输到后台处理
                $.ajax({
                    type: "POST",
                    url: "faceLogin/searchFace",
                    data: {
                        img: img
                    },
                    dataType: "JSON",
                    success: function(data) {
                        //返回的结果
                        //取出对比结果的返回分数，如果分数90以上就判断识别成功了
                        if (parseInt(data.result.user_list[0].score) > 90) {
                            //关闭摄像头
                            //video.srcObject.getTracks()[0].stop();
                            //提醒用户识别成功
                            alert("验证成功!");
                            $.ajax({
                                url: "http://localhost:8080/studentsign2",
                                type: "POST",
                                data: {
                                    "courseName": $("select#coursename").val(),
                                    "studentId": ppuser
                                },
                                dataType: "json",
                                success: function(res) {
                                    if (res == 1) {
                                        layer.alert("签到成功！")
                                    } else {
                                        layer.alert("学生重复签到！")
                                    }
                                    layer.close(index)
                                }
                            })
                        }
                    },
                    error: function(q, w, e) {
                        alert(q + w + e);
                    }
                });
            };
            //开启摄像头
            function open() {
                //获取摄像头对象
                canvas = document.getElementById("canvas");
                context = canvas.getContext("2d");
                //获取视频流
                video = document.getElementById("video");
                var videoObj = {
                        "video": true
                    },
                    errBack = function(error) {
                        console.log("Video capture error: ", error.code);
                    };
                context.drawImage(video, 0, 0, 330, 250);
                //初始化摄像头参数
                if (navigator.getUserMedia || navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia) {
                    navigator.getUserMedia = navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia;
                    navigator.getUserMedia(videoObj, function(stream) {
                        video.srcObject = stream;
                        video.play();
                    }, errBack);
                }
            }
            //将摄像头拍取的图片转换为Base64格式字符串
            function getBase64() {
                //获取当前图像并转换为Base64的字符串
                var imgSrc = canvas.toDataURL("image/png");
                //截取字符串
                return imgSrc.substring(22);
            };

        })
    </script>

</body>

</html>